import { HotTable } from '@handsontable/react';
import 'handsontable/dist/handsontable.full.css';
import React, { useState } from 'react';
import { Input } from 'antd';

const defaultData = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13]
];

const defaultCol = ['A', 'B', '日期', 'D', '备注', 'E', 'F'];
const ReportDesigner: React.FC<any> = (props: any) => {
  const [data, setData] = useState(defaultData);
  const [colHeaders, setColHeaders] = useState(defaultCol);
  const [currentCol, setCurrentCol] = useState();
  const otherProps = {
    colHeaders(index: number) {
      const column = colHeaders[index];
      if (index === currentCol) {
        return `<input id="report-form-column-${index}" value="${column}" style="width:100%;background: transparent;border: none;outline: none;"/>`;
      }
      return column;
    },
    afterGetColHeader(index: any, TH: any) {
      if (index >= 0) {
        TH.addEventListener('dblclick', () => {
          setCurrentCol(index);
        });
        const inputDom = TH.querySelectorAll(`#report-form-column-${index}`)[0];
        if (inputDom) {
          inputDom.addEventListener('blur', (ev: any) => {
            const cols = [...colHeaders];
            cols[index] = ev.target.value.trim();
            setColHeaders(cols);
            setCurrentCol(undefined);
          });
        }
      }
    }
  }
  return (
    <div id="hot-app">
      <Input onChange={(ev) => { setColHeaders([ev.target.value, 'B', '日期', 'D', '备注', 'E', 'F']) }} />
      <HotTable
        licenseKey='non-commercial-and-evaluation'
        data={data}
        width="800"
        height="300"
        // colHeaders={colHeaders}
        // colHeaders              // 显示列头(默认A,B,C,D,...)
        rowHeaders              // 显示行头
        stretchH="last"         // 延伸最后一列
        allowRemoveColumn       // 移除列
        fixedRowsTop={1}        // 固定行头位置
        // fixedRowsBottom={1}     // 固定行尾位置
        fixedColumnsLeft={1}    // 固定列头位置
        colWidths={[45, 100, 160, 60, 80, 80, 80]}      // 索引列宽度
        rowHeights={[50, 40, 100]}                      // 索引行高度
        manualColumnResize      // 可改变列宽
        manualRowResize         // 可改变行高
        manualColumnMove        // 可移动列
        manualRowMove           // 可移动行
        contextMenu             // 开启右键
        dropdownMenu            // 列头下拉菜单
        className="htCenter"    // 单元格样式
        cell={[                 // 指定单元格样式
          { row: 1, col: 2, className: "htRight htMiddle" },
        ]}
        mergeCells={[           // 合并的行列
          { row: 1, col: 2, rowspan: 2, colspan: 2 },
        ]}
        // 移除行前
        beforeRemoveRow={(index, amount) => {
          console.log('beforeRemoveRow', index, amount);
          return false;
        }}
        beforeChange={(changes: any, source: string) => {
          console.log('beforeChange', changes, source);
          return false;
        }}
        // 合并单元格前
        afterSetCellMeta={(row, col, key, value) => {
          console.log('afterSetCellMeta', row, col, key, value);
        }}
        // 移除列前
        beforeRemoveCol={(index: number, amount: number) => {
          console.log('beforeRemoveCol', index, amount);
          return false;
        }}
        afterColumnMove={(oldIndex: number, newIndex: number) => {
          console.log('afterColumnMove', oldIndex, newIndex);
          return false;
        }}
        {...otherProps}
        {...props}
      />
    </div>
  )
}

export {ReportDesigner};
